<template>
    <div class="div">
        <ul>
            <li v-for="(itme,index) in list" :key="index" @click="add(itme.name)">
                <p><img :src="fontname==itme.name?itme.img_hover:itme.img" alt=""></p>
                {{itme.title}}
            </li>             
        </ul>
        
    </div>
</template>
<script>
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
   export default {
        name:'Footer',
        data() {
            return {
                // fontname:"/",
                list:[
                    {
                        img:require("../assets/images/home.png"),
                        img_hover:require("../assets/theme-img/home-active.png"),
                        title:"首页",
                        name:"/",
                    },
                    {
                        img:require("../assets/images/home_course_grey.png"),
                        img_hover:require("../assets/theme-img/course-active.png"),
                        title:"课程",
                        name:"/course",
                    },
                    {
                        img:require("../assets/images/study.png"),
                        img_hover:require("../assets/theme-img/study-active.png"),
                        title:"约课记录",
                        name:"/record",
                    },
                    {
                        img:require("../assets/images/question.png"),
                        img_hover:require("../assets/theme-img/user-active.png"),
                        title:"联习",
                        name:"/practise",
                    },
                    {
                        img:require("../assets/images/user.png"),
                        img_hover:require("../assets/theme-img/user-active.png"),
                        title:"我的",
                        name:"/my",
                    }
                ]
            };
        },
        methods: {
            ...mapMutations(['cut']),
            add(str){
                this.cut(str)
                this.$router.push(str)
            }
        },
        computed: {
            ...mapState(["fontname"]),
        },
   };
</script>
<style scoped>
*{
    padding: 0;
    margin: 0;
}
.div{
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
}
.div>ul{
    display: flex;
    
}
.div>ul>li{
    padding: .1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}
.div>ul>li>p{
    width: 20px;
    height: 20px;
    padding-bottom: 5px;
}
.div>ul>li>p>img{
    width: 100%;
    
}
</style>